<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - interactive cubes</title>
    <meta charset="utf-8">
    <style>
        body {
            background-color: #f0f0f0;
            color: #444;
        }
        a {
            color: #08f;
        }
    </style>
</head>
<body>

<div id="info" style="width: 100%;height: 100%">
    <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive cubes
</div>


<script type="module">

    import * as THREE from "https://unpkg.com/three@0.119.0/build/three.module.js";
    import { OrbitControls } from "https://unpkg.com/three@0.119.0/examples/jsm/controls/OrbitControls.js";
    import Stats from 'https://unpkg.com/three@0.119.0/examples/jsm/libs/stats.module.js';
    import { OBJLoader } from "https://unpkg.com/three@0.119.0/examples/jsm/loaders/OBJLoader.js"
    import { MTLLoader } from "https://unpkg.com/three@0.119.0/examples/jsm/loaders/MTLLoader.js"

    let container, stats;
    let camera, scene, raycaster, renderer,controls;

    let INTERSECTED;
    let savedColor;

    const pointer = new THREE.Vector2();

    init();
    animate();

    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        //camera
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.set(0,10,20);

        //scene
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xf0f0f0 );

        //light
        var ambient = new THREE.AmbientLight(0xffffff);
        scene.add(ambient);

        // initContent();
        initFloor();

        //raycaster
        raycaster = new THREE.Raycaster();

        //render
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        //control
        controls = new OrbitControls(camera,renderer.domElement);
        controls.update();

        //stats
        stats = new Stats();
        container.appendChild( stats.dom );

        document.addEventListener( 'mousemove', onPointerMove );
        document.addEventListener( 'click', onPointerClickObj );

        window.addEventListener( 'resize', onWindowResize );

    }

    function initContent() {
        const geometry = new THREE.BoxGeometry( 11, 3, 3 );
        // const textureLoader = new THREE.TextureLoader().load("./floor/metrial.jpg");

        for ( let i = 0; i < 2; i ++ ) {

            const object = new THREE.Mesh( geometry,
                new THREE.MeshBasicMaterial( {
                    color: 0x0000ff,
                    transparent:true,
                    opacity:0.3
                } ) );

            let edgesMtl =  new THREE.LineBasicMaterial({color: 0x1535f7});

            // THREE.EdgesHelper has been removed. Use THREE.EdgesGeometry instead.
            let cubeEdges = new THREE.EdgesGeometry(geometry, 1);
            // edgesMtl.depthTest = false;
            let cubeLine = new THREE.LineSegments(cubeEdges, edgesMtl);

            object.add(cubeLine);

            object.position.y = i*3;

            scene.add( object );

        }
    }

    function initShape() {

        const shape = new THREE.Shape();
    }

    function initFloor() {

        const objloader = new OBJLoader();
        const mtlLoader = new MTLLoader();
        mtlLoader.load('./floor/demo.mtl',function (mtl) {
            mtl.preload();
            objloader.setMaterials(mtl);
        })
        for (let i = 0; i < 3; i++){

            objloader.load('./floor/demo.obj',function (root) {
                root.rotation.y -= 1.5;
                root.position.y = i*2.8;
                scene.add(root);
            })
        }
    }

    function onPointerMove( event ) {

        pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    }

    function onPointerClick() {
        scene.traverse(function (obj) {
            if (obj.type !== 'Mesh'){
                return;
            }
            if (INTERSECTED){
                if (INTERSECTED !== obj){
                    obj.material.visible = false;
                    obj.children[0].material.visible = false;
                }
            }else{
                obj.material.visible = true;
                obj.children[0].material.visible = true;
            }
        })
    }

    function onPointerClickObj() {

        // find intersections

        raycaster.setFromCamera( pointer, camera );

        const intersects = raycaster.intersectObjects( scene.children, true );

        if ( intersects.length > 0 ) {
            INTERSECTED = intersects[0].object;
            console.log("click",INTERSECTED.id);
            window.location.href = './2D-module.html'
        }else{
            INTERSECTED = null;
        }
    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function animate() {

        requestAnimationFrame( animate );

        controls.update();

        // render();
        renderer.render( scene, camera );
        stats.update();

    }

    function render() {

        // find intersections

        raycaster.setFromCamera( pointer, camera );

        const intersects = raycaster.intersectObjects( scene.children, false );

        if ( intersects.length > 0 ) {

            if ( INTERSECTED != intersects[ 0 ].object ) {

                if ( INTERSECTED ) INTERSECTED.material.color.setHex( savedColor);
                INTERSECTED = intersects[ 0 ].object;
                savedColor = INTERSECTED.material.color.getHex();
                INTERSECTED.material.color.setHex( 0xff0000 );

            }

        } else {

            if ( INTERSECTED ) INTERSECTED.material.color.setHex( savedColor );

            INTERSECTED = null;

        }

        renderer.render( scene, camera );

    }

</script>

</body>
</html>